<template>
	<view class="order">
		<!-- <view class="team_top">
			<view class="header-card">
				<view class="words">
					<view class="title">重要通知</view>
					<view class="item">①严禁买卖、出租电话卡；严禁渉诈涉扰；</view>
					<view class="item">②用于电销需录音报备；次月28日前禁止销户；</view>
					<view class="item">③恶意诱导用户注销，追回双倍佣金并承担运营商罚款，情节严重的报送公安机关；</view>
				</view>
			</view>
		</view> -->
		<u-modal v-model="show" :content="content"></u-modal>
		
		<view class="nav-card">
			<view class="nav-list">
				<view class="nav-item">
					<image class="nav-item-image" src="@/static/images/index/icon1.png" @click="goPath('/pages/order/text-list?m_type=3')"></image>
					<view>推广必读</view>
				</view>
				<view class="nav-item" @click="goPath('/pages/order/text-list?m_type=2')">
					<image class="nav-item-image" src="@/static/images/index/icon2.png"></image>
					<view>重要通知</view>
				</view>
				<view class="nav-item" @click="txtNavBtn(7)">
					<image class="nav-item-image" src="@/static/images/index/icon3.png"></image>
					<view>一证通查</view>
				</view>
				<view class="nav-item" @click="goPath('/pages/order/CreatePoster')">
					<image class="nav-item-image" src="@/static/images/index/icon4.png"></image>
					<view>邀请下级</view>
				</view>
			</view>
			
			<view class="banner-list">
				<u-swiper :list="bannerList" height="280" name="image_text" @click="bannerBtn"></u-swiper>
			</view>
		</view>
		

		<view class="notice-list">
				<u-icon name="volume-up-fill" color="#f19d38" style="margin-left: 20rpx;"></u-icon>
				<view class="notice-list-swiper">
					<u-swiper
					:list="noticeList" 
					height="65" 
					name="image_text" 
					@click="msgInfo" 
					title 
					indicator-pos="none"
					:title-style="{backgroundColor: '#fcf6ed', color: '#f19d38'}"></u-swiper>
				</view>
				
			</view>
		<!-- <view style="height: 460rpx;"></view> -->
		<!--  -->
		
		<view class="nav">
			<!-- <u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false"
				:current="current" @change="navChange"></u-tabs> -->
				
				<view class="nav-list">
					<view class="nav-item" v-for="(item,index) in navList" :class="{'active-color': current === index}">
						<text @click="navChange(index)">{{item.name}}</text>
						<u-icon name="question-circle-fill" @click="handelConfig(index)"></u-icon>
					</view>
				</view>
		</view>
		
		<view class="search_box">
			
			<u-tabs :list="twonavList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false"
				:current="twocurrent" @change="twonavChange"></u-tabs>
				
			<u-dropdown active-color="#26C281" ref="uDropdown" v-if="false">
				<u-dropdown-item title="筛选">
					<u-form :model="qureyData" ref="uForm" class="dropdown-form" label-width="160">
						<u-form-item label="版本">
							<view class="dropdown-form-item" @click="handelSelect('card_type')">
								<view class="dropdown-form-item-text">{{dropdownTitle('card_type')}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="运营商">
							<view class="dropdown-form-item" @click="handelSelect('cate_id')">
								<view class="dropdown-form-item-text">{{dropdownTitle('cate_id')}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="结算周期" v-if="current == 0">
							<view class="dropdown-form-item" @click="handelSelect('day_value')">
								<view class="dropdown-form-item-text">{{dropdownTitle('day_value')}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						<!-- <u-form-item label="充值金额">
							<u-input v-model="qureyData.name" />
						</u-form-item> -->
						
						<u-form-item label="充值金额">
							<view class="dropdown-form-item" @click="handelSelect('top_money_value')">
								<view class="dropdown-form-item-text">{{dropdownTitle('top_money_value')}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</u-form-item>
						
						<view style="display: flex; justify-content: center; padding: 30rpx;">
							<u-button type="primary" size="medium" 
								style="margin-right: 20rpx; background-color: #26C281;" @click="getList()">查询</u-button>
							<u-button size="medium" @click="resetForm()">重置</u-button>
						</view>
					</u-form>
				</u-dropdown-item>
				<!-- <u-dropdown-item v-model="card_type" :title="banbenTitle" :options="actionSheetList" @change="confirm"></u-dropdown-item>
				<u-dropdown-item v-if="current != 0" v-model="day_value" :title="jiesuanTitle" :options="day_actionSheetList" @change="confirm"></u-dropdown-item>
				<u-dropdown-item v-if="current == 0" v-model="cate_id" :title="cate_idTitle" :options="cate_idTitleSheetList" @change="confirm"></u-dropdown-item> -->
			</u-dropdown>
			<!-- <view class="dropdown-button">
				<u-button size="mini" @click="handelopup(0)">推广必读</u-button>
			</view>
			<view class="dropdown-button">
				<u-button size="mini" @click="handelopup(1)">重要通知</u-button>
			</view> -->
			
			 <!-- <u-collapse>
				<u-collapse-item :title="sousuo">
					<u-form>
						<u-form-item>
							<u-input placeholder="请输入产品名称" v-model="package_name"  maxlength="40" border></u-input>
						</u-form-item>
						
						
						<u-input v-model="value" :type="type" :border="border" @click="jiesuan_type = true"  placeholder="请选择结算类型" />
								<u-action-sheet :list="actionSheetList" v-model="jiesuan_type" @click="actionSheetCallback"></u-action-sheet>
						<u-input v-model="day_value" :type="type" :border="border" @click="day = true"  placeholder="请选择结算时间" />
								<u-action-sheet :list="day_actionSheetList" v-model="day" @click="day_actionSheetCallback"></u-action-sheet>
						
						<u-form-item>
								<view class="btn_box">
									<u-button shape="circle" type="error" class="btn reset" @click="reset">重置</u-button>
									<u-button shape="circle" class="btn confirm" @click="confirm">查询</u-button>
								</view>
						</u-form-item>
					</u-form>
				</u-collapse-item>
			</u-collapse> -->
		</view>
		<view class="container_box">
			<view class="no_html" v-if="list.length==0">
						<image src="@/static/images/no_img5.png" mode=""></image>
						<text>暂无信息</text>
					</view>
					<view class="no_html" v-else>
						<view class="list" v-for="(item,index) in list" :key="index" @click="detailsBtn(item.id)">
							<view class="list_top">
								<view class="text">
									<text class="color2">{{item.cate_id_text}}-{{item.id}}-{{item.day_text}}</text>
								</view>
			
							</view>
							<view class="goods_info">
								<view class="image">
									<image :src="item.photos" mode="aspectFill"></image>
								</view>
								<view class="info">
									<view class="name one-txt-cut">{{item.name}}</view>
									<!-- <view class="tip">
										<text>佣金：{{item.junior_rebate}}</text>
									</view> -->
									<view class="tips-box">
										<view class="tips-item aaa" v-show="item.is_extend == 2">
											主推
										</view>
										<view class="tips-item bbb">
											{{item.age}}
										</view>
										<view class="tips-item bbb">
											佣金{{item.junior_rebate}} 
										</view>
										<!-- <view class="r-btn" style="background:#ffebc1;color:#df5b1e;">{{item.card_type_text}} </view> -->
									</view>
									<view class="pro-item">月租：{{item.monthly}}</view>
									<view class="pro-item">包含：{{item.flow}}</view>
									<view class="pro-item">首充：{{item.call_minutes}}</view>
			<!-- 						<view class="pro-item">年龄：{{item.age}}</view>
									<view class="pro-item">充值要求：{{item.demand}}</view> -->
								</view>
							</view>
							<!-- <view class="tip_txt1">
								<view class="left">共1种商品</view>
								<view class="right">
									<text class="txt1">合计：</text>
									<text class="txt2">￥</text>
								</view>
							</view> -->
							<view class="list_btn">
								<!-- 仓储才有 -->
								<text class="btn1" @click.stop="dianji(item.jsgz,'结算规则')">结算规则</text>
								<text class="btn1" @click.stop="dianji(item.spxz,'下单要求')">下单要求</text>
								<text class="btn1" @click.stop="copyBtn(item.web_url_text)">复制链接</text>
								<text class="btn1" @click.stop="createBanner(item)">生成海报</text>
								<!-- <text class="btn1" @click.stop="">下架</text> -->
							</view>
						</view>
					</view>
		</view>
		<view class="mall_loading" v-if="list.length">
			<u-loadmore :status="status" color='#999' />
		</view>
		<u-popup v-model="configShow" mode="center" border-radius="16" width="590rpx" height="900rpx">
			<view class="gy-center-title">{{configTitle}}</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content">
				<u-parse :html="configContent"></u-parse>
			</scroll-view>
			<view class="gy-bottom" @click="configShow = false">我知道</view>
		</u-popup>
		
		<u-popup v-model="goodsShow" mode="center" border-radius="16" width="590rpx" height="900rpx">
			<view class="gy-center-title">{{goodsTitle}}</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content">
				<u-parse :html="goodsTongzhi"></u-parse>
			</scroll-view>
			<view class="gy-bottom" @click="goodsShow = false">我知道</view>
		</u-popup>
		
		<u-popup v-model="zytzgoodsShow" mode="center" border-radius="16" width="590rpx" height="900rpx">
			<view class="gy-center-title">{{goodsTitle}}</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content">
				<u-parse :html="zhongyaotongzhi"></u-parse>
			</scroll-view>
			<view class="gy-bottom" @click="goodsShow = false">我知道</view>
		</u-popup>
		<ConfirmReceipt ref="confirm_receipt" @submit='submitBtn'></ConfirmReceipt>
		<!-- 筛选选择器 -->
		<u-select v-model="dropdownShow" :list="dropdownList" @confirm="selectConfirm" confirm-color="#26C281"></u-select>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	export default {
		components: {
			ConfirmReceipt
		},
		data() {
			return {
				navList: [
					{
						id: '1',
						name: '0-7日结算'
					},
					{
						id: '2',
						name: '分月预结算'
					},
					{
						id: '3',
						name: '次月底结算'
					},
				// {
				// 	id: '1',
				// 	name: '秒结'
				// },
				// {
				// 	id: '2',
				// 	name: '次月结'
				// }, 
				// {
				// 	id: '1',
				// 	name: '电信'
				// }, {
				// 	id: '2',
				// 	name: '联通'
				// }, {
				// 	id: '3',
				// 	name: '移动'
				// }
				
				// {
				// 	name: '宽带'
				// },
				// {
				// 	name: '激活日结'
				// },
				],
				twocurrent: 0,
				twonavList: [
					{
						id:0,
						name: '全部'
					},
					{
						id:1,
						name: '主推'
					},
					{
						id:2,
						name: '联通'
					},
					{
						id:3,
						name: '电信'
					},
					{
						id:4,
						name: '移动'
					},
					{
						id:5,
						name: '提前结'
					},
					{
						id:6,
						name: '激活版'
					}
				],
				
				sousuo:"搜索",
				value: '',
				day_value:'',
				top_money_value:'',
				type: 'select',
				jiesuan_type: false,
				border: true,
				card_type_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:2,
						label: '激活版'
					},
					{
						value:1,
						label: '充值版'
					},
					{
						value:3,
						label: '纯激活'
					}
				],
				day:false,
				day_value_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:1,
						label: '当日结算'
					},
					{
						value:2,
						label: '次日结算'
					},
					{
						value:3,
						label: '第三天结算'
					},
					{
						value:4,
						label: '第四天结算'
					},
					{
						value:5,
						label: '第五天结算'
					},
					
					{
						value:7,
						label: '2-7天结算'
					},
				],
				top_money_value_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:1,
						label: '首充50'
					},
					{
						value:2,
						label: '首充100'
					},
					{
						value:3,
						label: '首充200'
					},
					{
						value:4,
						label: '累充50'
					},
					{
						value:5,
						label: '累充100'
					}
				],
				cate_id: '',
				cate_id_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:1,
						label: '电信'
					},
					{
						value:2,
						label: '联通'
					},
					{
						value:3,
						label: '移动'
					},
				],
				package_name:'',
				current: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				list: [],
				noticeList: [],
				ids: '',
				user_info: [],
				visible: false,
				show: false,
				content: '',
				gyShow: false,
				goodsShow: false,
				goodsTitle: '公告',
				goodsTongzhi: '',
				banben:'',
				card_type:'',
				day_value:'',
				qureyData: {},
				dropdownType: '',
				dropdownShow: false,
				dropdownList: [],
				zhongyaotongzhi:'',
				zytzgoodsShow:false,
				
				configShow: false,
				configTitle: '',
				configContent: '',
				configData: {},
				bannerList: [],
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		onShow() {
			this.shopInfo()
			this.getMsgsend()
		},
		onLoad(opt) {
			this.page = 1
			this.ids = opt.ids;
			this.getBanners()
			this.getConfig()
			this.navChange(0)
			// this.getList()
			// this.shopInfo()
			// this.getMsgsend()
		},
		onHide() {
			this.$refs.confirm_receipt.closeBtn()
		},
		methods: {
			getBanners() {
				this.$httpApi.GetBanners().then((res) => {
					this.bannerList = res.data
				})
			},
			bannerBtn(index){
				uni.navigateTo({
					url:'/pages/shop/banner_details?id='+this.bannerList[index].id
				})
			},
			getConfig() {
				this.$httpApi.indexConfig().then(res => {
					this.configData = res.data
				})
			},
			handelConfig(index) {
				this.configShow = true
				if(index == 0) {
					this.configTitle = '0-7日结算'
					this.configContent = this.configData.qiri_content
				}
				if(index == 1) {
					this.configTitle = '分月预结算'
					this.configContent = this.configData.yugu_content
				}
				if(index == 2) {
					this.configTitle = '次月底结算'
					this.configContent = this.configData.ciyue_content
				}
			},
			closeDropdown() {
							this.$refs.uDropdown.close();
						},
			handelopup(type) {
				this.goodsTitle = type == 0 ? '推广必读' : '重要通知'
				// this.goodsShow = true
				if(type == 0){
					this.goodsShow = true
					this.zytzgoodsShow = false
					// this.goodsTongzhi = '....'
				}else {
					this.goodsShow = false
					this.zytzgoodsShow = true
				}
			},
			goPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			dropdownTitle(type) {
				const text = this[type + '_list'].find(i => this.qureyData[type] == i.value)
				return text ? text.label : '全部'
			},
			resetForm() {
				this.qureyData = {}
			},
			handelSelect(type) {
				this.dropdownShow = true
				this.dropdownType = type
				this.dropdownList = this[this.dropdownType+'_list']
			},
			selectConfirm(e) {
				this.$set(this.qureyData, this.dropdownType, e[0].value)
			},
			filterHTML(html) {
				return html.replace(/<[^<>]+>/g,'');
			},
			getMsgsend() {
				this.$httpApi.Msgsend().then((res) => {
					if (res.code == 1) {
						// this.noticeList = res.data.map(item => this.filterHTML(item.title))
						this.noticeList = res.data
						// this.townoticeList = res.data;
					}
				})
			},
			actionSheetCallback(index) {
							this.value = this.actionSheetList[index].text;
							this.banben = this.actionSheetList[index].id;
						},
						day_actionSheetCallback(index){
							this.day_value = this.day_actionSheetList[index].text;
							this.jiesuan = this.day_actionSheetList[index].id;
						},
			handleGy() {
				this.gyShow = true
			},
			/**
			 * 滚动到顶部
			 */
			async autoScroll() {
				let el = await this.getDom('.team_top')
				uni.pageScrollTo({
					scrollTop:el.height,
					duration:300,
					fail( e ) {
						console.log( e  );
					}
				})
			},
			
			/**
			 * 获取dom元素对象
			 */
			async getDom( domSelect ) {
				return new Promise((resolve,reject) => {
					let query = uni.createSelectorQuery().in(this)
					query.select(domSelect).boundingClientRect( ret => {
						resolve( ret )
					}).exec()
				})
			},
			
			copyBtn(txt) {

				uni.setClipboardData({
					data: txt,
					success: function() {
						console.log('success');
					}
				});
			},
			txtNavBtn(type){
				uni.navigateTo({
					url:'/pages/other/text?type='+type
				})
			},
			msgInfo(index){
				uni.navigateTo({
					url:'/pages/other/text?type=8&ids='+this.noticeList[index].id
				})
			},
			// 获取用户信息
			shopInfo() {
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.userShop().then((res) => {
					that.$tips.hideLoading()
					if (res.code == 1) {
						that.user_info = res.data.userinfo;
						that.spread = res.data.spread
					}
				})
			},
			// 列表
			getList() {
				
				var that = this
				// console.log('--------');
				// console.log(that.qureyData.day_value);
				if (that.page == 1) {
					that.$tips.showLoading('加载中')
				} else {
					that.status = 'loading'
				}
				var params = {
					page: that.page,
					agent_id: that.ids,
					balance_type: that.navList[this.current].id,
					cate_id: that.twonavList[that.twocurrent].id,
					
					card_type:that.qureyData.card_type,
					day_value: that.qureyData.day_value,
					top_money_value:that.qureyData.top_money_value
				}
				// if(that.current == 0) {
				// 	// 日结
					
				// 	params.jiesuan_type = ''
				// 	// params.day_value = ''
				// } else if (that.current == 1) {
				// 	 // 主推
				// 	// params.is_extend = 2
				// 	params.day_value = 6
				// }
				
				// if(this.twocurrent == 0) {
				// 	params.is_extend = 2
				// }else {
					
				// }
				
				that.$httpApi.orderListGoods(params).then((res) => {
					if (res.code == 1) {
						if (that.page == 1) {
							that.list = []
							that.$tips.hideLoading()
						}
						if (res.data.current_page == res.data.last_page) {
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.list = that.list.concat(res.data.data)
						
						this.goodsTitle = '公告'
						that.goodsShow = res.data.flag
						that.goodsTongzhi = res.data.tongzhi
						that.zhongyaotongzhi = res.data.zhongyaotongzhi
					}
				})
				// that.closeDropdown();
			},

			detailsBtn(ids) {
			
				uni.navigateTo({
					url: '/pages/order/order_details?id=' + ids + '&agid=' + this.user_info.id
				})
			},

			// 切换
			navChange(index) {
				this.current = index
				// this.qureyData.balance_type = this.navList[index].id
				// this.qureyData.card_type = index == 0 ? 2 : ''
				// this.qureyData.day_value = index
				// this.qureyData.top_money_type = index == 0 ? 2 : ''
				this.page = 1
				this.resetForm()
				this.getList()
				this.autoScroll()
			},
			twonavChange(index) {
				this.twocurrent = index
				this.qureyData.cate_id = this.twonavList[index].id
				this.getList()
			},
			// 查看物流
			logisticsBtn(val) {
				uni.navigateTo({
					url: '/pages/other/logistics?order=' + val
				})
			},
			// 联系店长
			phoneBtn(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},

			/**
			 * 生成海报
			 */
			createBanner(item) {
				let {
					id,
					packages_id
				} = item
				uni.navigateTo({
					url: `/pages/order/CreateBanner?id=${id}&packages_id=${packages_id}`
				})
			},

			reset () {
				this.page = 1
				this.current2 = -1
				this.package_name = ""
			},
			confirm() {
				this.page = 1 
				this.getList()
			},

			// 联系客服
			kfBtn() {
				uni.navigateTo({
					url: '/pages/other/text?type=4'
				})
			},
			// 修改佣金
			receiptFour(val, rebate) {
				this.$refs.confirm_receipt.receiptFour(val)
			},
			dianji(val, title) {
				this.show = true;
				this.content = val
			},

			tongyi() {
				this.$refs.confirm_receipt.openBtnTwo(this.ids)
			},
			submitBtn() {
				this.page = 1
				this.getList()
			},
		},
		onReachBottom() {
			if (this.status == 'nomore' || this.status == 'loading') {
				return
			}
			this.page++
			this.getList()
		},
	}
</script>

<style lang="less">
	.nav-card {
		background: #fff;
		color: #333;
		
		.nav-list {
			display: flex;
			
			.nav-item {
				flex: 1;
				text-align: center;
				
				.nav-item-image {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
		
		.banner-list {
			margin: 30rpx 30rpx 0 30rpx;
			padding-bottom: 30rpx;
		}
		.notice-list {
			display: flex;
			margin: 0 30rpx;
			background-color: #fcf6ed;
			border-radius: 20rpx;
		}
		.notice-list-swiper {
			flex: 1;
		}
	}
	.nav-list {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		
		.nav-item {
			flex: 1;
			text-align: center;
		}
		
		.active-color {
			color: #26C281;
			font-weight: 500;
		}
	}
	.dropdown-form {
		padding: 0 32rpx;
		background-color: #fff;
	}
	.dropdown-form-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.dropdown-form-item-text {
			flex: 1;
			color: #666;
		}
	}
	.dropdown-button {
		margin-right: 32rpx;
	}
	.search_box {
		// display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 100%;
		
		.search_box_tab {
			flex: 1;
		}
		
		::v-deep .u-dropdown__content {
			width: 750rpx;
			height: 100%;
		}
		// padding: 0 40rpx;
		.btn_box {
			width: 100%;
			display: flex;
			justify-content: center;
			.btn {
				margin: 10rpx;
				width: 160rpx;
			}
			.confirm {
				background-color: #00afaa;
				color: #fff;
			}
		}
	}
	
	.gy-center-title {
		padding: 20rpx 0;
		text-align: center;
		font-weight: 700;
		color: #000000;
	}
	.gy-center {
		padding: 0 30rpx;
	}
	.gy-center-p {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		line-height: 42rpx;
		color: #666;
		
	}
	.gy-center-p-border {
		border-bottom: 1rpx solid #e5e5e5;
	}
	.gy-content {
		height: 840rpx;
		overflow-y: auto;
	}
	.goods-tz-content {
		box-sizing: border-box;
		height: 700rpx;
		overflow-y: auto;
		cursor: pointer;
	}
	.gy-bottom {
		border-top: 1rpx solid #e5e5e5;
		text-align: center;
		padding-top: 50rpx;
		color: #148EFF;
	}
	.notice-list {
		display: flex;
		margin: 0 30rpx;
		background-color: #fcf6ed;
		border-radius: 20rpx;
	}
	.notice-list-swiper {
		flex: 1;
	}
	.order {
		width: 100%;

		.header-card {
			background: #26C281;
			color: #fff;
			margin: 30rpx;
			line-height: 150%;
			padding: 30rpx;
			border-radius: 10rpx;
			
			.title{font-size:30rpx;font-weight:bold;padding:10rpx 0}
		}

		.team_top {
			position: relative;
			z-index: 10;
			width: 100%;
			left: 0;
			top: 0;
			background: #fff;
			border-bottom: 2rpx solid #f7f8fa;

			.nav {
				width: 100%;
				height: 88rpx;
			}
		}
		.no_html {
			padding:20rpx 0;
		}

		// 
		.list {
			width: 100%;
			background: #fff;
			margin-bottom: 24rpx;

			.list_top {
				width: 100%;
				line-height: 88rpx;
				padding: 0 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					text {
						display: block;
						margin-right: 10rpx;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FFA551;
					}

					.color2 {
						background: #26C281;
					}

					.color3 {
						background: #148EFF;
					}

					.color4 {
						background: #BC171B;
					}
				}

				.right {
					color: #666;
				}

				.right1 {
					color: #FF6230;
				}
			}

			.goods_info {
				width: 100%;
				padding: 24rpx 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;

				.image {
					position: relative;
					width: 240rpx;
					height: 240rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.info {
					width: calc(100% - 240rpx);
					padding-left: 20rpx;
					
					.tips-box{
						
						display:flex;
						justify-content: flex-start;
						align-items: center;
						padding:20rpx 0;
						font-size: 24rpx;
						.tips-item{margin-right:10rpx; border-radius:100rpx;padding:6rpx 20rpx;}
						.aaa{background:#e0ecff;color:#1b4cd3;}
						.bbb{background:#ffebc1;color:#df5b1e;}
						
					}

					.pro-item {
						color: #666;
						line-height: 160%;
						font-size: 24rpx;
					}

					.name {
						width: 100%;
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}

					.tip {
						width: 100%;
						padding-top: 20rpx;
						display: flex;

						text {
							padding: 6rpx 10rpx;
							font-size: 24rpx;
							background: #eee;
							color: #999;
							border-radius: 5rpx;
						}
					}

					.money {
						width: 100%;
						padding-top: 10rpx;
						display: flex;
						align-items: center;

						text {
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}

						.color1 {
							color: #FF6230;
						}

						.color2 {
							color: #26C281;
						}
					}

					.money1 {
						width: 100%;
						padding: 20rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								display: block;
								width: 40rpx;
								height: 40rpx;
							}

							text {
								padding-left: 5rpx;
								font-size: 24rpx;
								font-weight: 600;
								color: #222222;
							}
						}

						.r-btn {
							background: #26C281;
							color: #fff;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							border-radius: 4rpx;
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.num {
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.tip_txt1 {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.right {
					display: flex;
					align-items: center;

					.txt1 {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}

					.txt2 {
						padding-left: 10rpx;
						font-size: 40rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.tip_txt {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;

					text {
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FF815A;
					}

					.color2 {
						background: #43A5FF;
					}

					.color3 {
						background: #51CE9A;
					}
				}
			}

			.list_btn {
				width: 100%;
				padding: 32rpx;
				display: flex;
				justify-content: flex-end;

				text {
					margin-left: 12rpx;
					display: block;
					padding: 0 20rpx;
					height: 64rpx;
					line-height: 60rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}

				.btn1 {
					color: #fff;
					background: #43A5FF;
				}

				.btn2 {
					color: #26C281;
					border: 2rpx solid #26C281;
				}
			}
		}
	}
</style>